<script setup lang="ts">
import useComputeForm from '@renderer/composables/useComputeForm'
import handlePopover from '@renderer/utils/handlePopover'
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const ceilingList = ref<CeilingInfoModel[]>([])
const handleComputeSide = (houseInfo: RoomListModel[]) => {
  ceilingList.value.forEach((item: CeilingInfoModel, index) => {
    const roomIndex = houseInfo.findIndex((houseItem) => houseItem.name == item.name)
    if (roomIndex != -1) {
      if (item.name != '楼梯间' && item.name != '衣帽间' && !item.name.includes('阳台')) {
        if (item.side_type) {
          if (item.name != '主卧' && item.name != '次卧1' && item.name != '次卧2') {
            handleMjCompute(item.name, item.number, item.side_type, item.option, index, houseInfo[roomIndex])
          } else {
            let queryName = item.name == '主卧' ? item.name + '过道' : item.name.split('(')[0] + '过道'
            const gdRoomIndex = houseInfo.findIndex((houseItem) => houseItem.name == queryName)
            handleMjCompute(
              item.name,
              item.number,
              item.side_type,
              item.option,
              index,
              houseInfo[roomIndex],
              houseInfo[gdRoomIndex],
            )
          }
        } else {
          ElMessage.error(`${item.name}的边吊类型未选择`)
        }
      } else {
        handleMjCompute(item.name, '', '', '', index, houseInfo[roomIndex])
      }
    }
  })
}
defineExpose({
  ceilingList,
  handleComputeSide,
})
const props = defineProps<{
  selectRoomList: string[]
}>()
watch(
  () => props.selectRoomList,
  (newValue) => {
    if (newValue.length) {
      const missingIndexes = ceilingList.value
        .map((item, index) => (newValue.includes(item.name) ? null : index))
        .filter((index) => index !== null)
      if (missingIndexes.length) {
        missingIndexes.forEach((item) => {
          ceilingList.value.splice(item, 1)
        })
      }
      newValue.forEach((item) => {
        const showItem = [
          '客厅',
          '餐厅',
          '过道',
          '主卧',
          '次卧1',
          '次卧2',
          '次卧3',
          '次卧4',
          '衣帽间',
          '楼梯间',
          '阳台1',
          '阳台2',
          '阳台3',
          '阳台4',
        ]
        const isHas = ceilingList.value.some((ceilingInfo: CeilingInfoModel) => ceilingInfo.name == item)
        if (showItem.includes(item) && !isHas) {
          ceilingList.value.push({
            calculate_id: pageQuery.calculate_id as unknown as number,
            house_number: pageQuery.house_number as unknown as number,
            cate_name: '吊顶项目',
            name: item,
            number: item == '客厅' || item == '餐厅' ? '0.75' : '',
            option: 0,
            unit: '米',
            side_type: '',
            total_square: 0,
          })
        }
      })
    } else {
      ceilingList.value = []
    }
  },
  { deep: true },
)
const handleInit = () => {
  ceilingList.value = []
  const showItem = [
    '客厅',
    '餐厅',
    '过道',
    '主卧',
    '次卧1',
    '次卧2',
    '次卧3',
    '次卧4',
    '衣帽间',
    '楼梯间',
    '阳台1',
    '阳台2',
    '阳台3',
    '阳台4',
  ]
  props.selectRoomList.forEach((item) => {
    if (showItem.includes(item)) {
      ceilingList.value.push({
        calculate_id: pageQuery.calculate_id as unknown as number,
        house_number: pageQuery.house_number as unknown as number,
        cate_name: '吊顶项目',
        name: item,
        number: item == '客厅' || item == '餐厅' ? '0.75' : '',
        option: 0,
        unit: '米',
        side_type: '',
        total_square: 0,
      })
    }
  })
}
await handleInit()
const { findPopoverContent } = handlePopover()
const { getCarpentryGather } = useComputeForm()
const initForm = async () => {
  const res = await getCarpentryGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  if (res.length) {
    ceilingList.value = []
    res.map((projectItem) => {
      if (projectItem.cate_name == '吊顶项目') {
        projectItem.carpentry_info.forEach((item) => {
          ceilingList.value.push({
            calculate_id: item.calculate_id,
            house_number: item.house_number,
            cate_name: '吊顶项目',
            name: item.name,
            number: item.number,
            option: item.option * 1,
            unit: '米',
            side_type: item.side_type,
            total_square: item.total_square,
          })
        })
      }
    })
  }
}
await initForm()
interface CeilingInfoModel {
  calculate_id: number
  house_number: number
  cate_name: string
  name: string
  number: string
  option: number
  unit: string
  side_type: string
  total_square: number
}
const side_typeOptions = ref([
  { label: '无边吊' },
  { label: '长单边吊顶' },
  { label: '宽单边吊顶' },
  { label: '长双边吊顶' },
  { label: '宽双边吊顶' },
  { label: '两长边一宽边吊顶' },
  { label: '两宽边一长边吊顶' },
  { label: '四边吊顶' },
])
const handleMjCompute = async (cateName, roomTopWidth, side_type, option, selectIndex, houseInfo, houseInfo2?) => {
  let mjNumber = 0
  let floorMj = Number(houseInfo.long_room) * Number(houseInfo.width_room) * option
  switch (cateName) {
    case '客厅':
    case '餐厅':
    case '过道':
    case '次卧3':
    case '次卧4':
      switch (side_type) {
        case '无边吊':
          mjNumber = 0
          break
        case '长单边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.long_room) * 1 + floorMj) * houseInfo.top
          break
        case '宽单边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.width_room) * 1 + floorMj) * houseInfo.top
          break
        case '长双边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.long_room) * 2 * 1 + floorMj) * houseInfo.top
          break
        case '宽双边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.width_room) * 2 * 1 + floorMj) * houseInfo.top
          break
        case '两长边一宽边吊顶':
          mjNumber =
            (Number(roomTopWidth) * (Number(houseInfo.long_room) * 2 + Number(houseInfo.width_room)) * 1 + floorMj) *
            houseInfo.top
          break
        case '两宽边一长边吊顶':
          mjNumber =
            (Number(roomTopWidth) * (Number(houseInfo.width_room) * 2 + Number(houseInfo.long_room)) * 1 + floorMj) *
            houseInfo.top
          break
        case '四边吊顶':
          mjNumber =
            (Number(roomTopWidth) * (Number(houseInfo.width_room) * 2 + Number(houseInfo.long_room) * 2) * 1 +
              floorMj) *
            houseInfo.top
          break
      }
      ceilingList.value[selectIndex].total_square = mjNumber
      break
    case '主卧':
    case '次卧1':
    case '次卧2':
      const roomGdMj = Number(houseInfo2.long_room) * Number(houseInfo2.width_room) * houseInfo2.top
      switch (side_type) {
        case '无边吊':
          mjNumber = 0 + roomGdMj
          break
        case '长单边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.long_room) * 1 + floorMj) * houseInfo.top + roomGdMj
          break
        case '宽单边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.width_room) * 1 + floorMj) * houseInfo.top + roomGdMj
          break
        case '长双边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.long_room) * 2 * 1 + floorMj) * houseInfo.top + roomGdMj
          break
        case '宽双边吊顶':
          mjNumber = (Number(roomTopWidth) * Number(houseInfo.width_room) * 2 * 1 + floorMj) * houseInfo.top + roomGdMj
          break
        case '两长边一宽边吊顶':
          mjNumber =
            (Number(roomTopWidth) * (Number(houseInfo.long_room) * 2 + Number(houseInfo.width_room)) * 1 + floorMj) *
              houseInfo.top +
            roomGdMj
          break
        case '两宽边一长边吊顶':
          mjNumber =
            (Number(roomTopWidth) * (Number(houseInfo.width_room) * 2 + Number(houseInfo.long_room)) * 1 + floorMj) *
              houseInfo.top +
            roomGdMj
          break
        case '四边吊顶':
          mjNumber =
            (Number(roomTopWidth) * (Number(houseInfo.width_room) * 2 + Number(houseInfo.long_room) * 2) * 1 +
              floorMj) *
              houseInfo.top +
            roomGdMj
          break
      }
      ceilingList.value[selectIndex].total_square = mjNumber
      break
    case '楼梯间':
    case '衣帽间':
    case '阳台1':
    case '阳台2':
    case '阳台3':
    case '阳台4':
      ceilingList.value[selectIndex].total_square = Number(houseInfo.long_room) * Number(houseInfo.width_room)
      break
  }
}
</script>

<template>
  <el-form :model="ceilingList">
    <template v-for="(item, index) in ceilingList" :key="index">
      <el-row :gutter="20">
        <el-col :span="12" v-if="item.name != '楼梯间' && item.name != '衣帽间' && !item.name.includes('阳台')">
          <el-form-item :key="index" label-width="150">
            <template #label>
              <span @click="findPopoverContent('边吊类型')">{{ item.name + '边吊类型:' }}</span>
            </template>
            <el-select v-model="item.side_type" placeholder="请选择">
              <el-option
                v-for="labelItem in side_typeOptions"
                :key="labelItem.label"
                :label="labelItem.label"
                :value="labelItem.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          v-if="
            String(item.side_type) != '无边吊' &&
            item.name != '楼梯间' &&
            item.name != '衣帽间' &&
            !item.name.includes('阳台')
          ">
          <el-form-item :key="index" label-width="150">
            <template #label>
              <span @click="findPopoverContent('顶展宽')">{{ item.name + '顶展宽:' }}</span>
            </template>
            <el-input v-model="item.number" type="number" @mousewheel.native.prevent placeholder="请输入">
              <template #append>{{ item.unit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="item.name != '楼梯间' && item.name != '衣帽间' && !item.name.includes('阳台')">
          <el-form-item label-width="150">
            <template #label>
              <span @click="findPopoverContent('无主灯吊顶')">无主灯吊顶:</span>
            </template>
            <el-radio-group v-model="item.option" placement="row">
              <el-radio label="是" :value="1" :customStyle="{ marginRight: '35px' }" />
              <el-radio label="否" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="150">
            <template #label>
              <span @click="findPopoverContent('吊顶面积')">{{ item.name + '吊顶面积:' }}</span>
            </template>
            <el-input v-model="item.total_square" type="number" @mousewheel.native.prevent placeholder="请输入">
              <template #append>平方</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-form>
</template>
<style lang="scss" scoped>
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
